<template>
  <view class="page">
    <view v-if="$data.info">
      <view class="text-center margin-top">
        正在为您寻找保洁师，请耐心等待......
      </view>
      <view class="find_img">
        <image :src="$data.info._picurl" />
      </view>
      <view class="margin-top-xl text-center">
        {{ $data.info.serviceTitle }}
      </view>
      <view class="margin-top padding-lr bg-white">
        <view class="row">
          <view class="row_left"> 服务时间 </view>
          <view class="row_right">
            {{ $data.info._firstStartServicedAt }}
          </view>
        </view>
        <view class="row">
          <view class="row_left"> 服务地址 </view>
          <view class="row_right">
            {{ $data.info.addressSnapshot.locationAddress }}
          </view>
        </view>
        <view class="row">
          <view class="row_left"> 订单状态 </view>
          <view class="row_right">
            <view class="flex justify-between align-center">
              <text :style="[$data.info._statusConfig.style]">
                {{ $data.info._statusConfig.label }}
              </text>
              <!-- <view
                v-if="$data.canUrgent"
                class="urgent"
                @tap="() => ($data.urgentShow = true)"
              >
                加急
              </view> -->
            </view>
          </view>
        </view>
        <view class="row">
          <view class="row_left"> 下单时间 </view>
          <view class="row_right">
            {{ $data.info._createdAt }}
          </view>
        </view>
      </view>
      <!-- 底部按钮 -->
      <view class="foot foot_box" v-if="!isSecondOrder">
        <view class="btn btn_cancel" @tap="onShowApply(false)"> 联系客服 </view>
        <view
          class="btn btn_cancel"
          v-if="$data.info.firstStatus == orderStatus.finding"
          @tap="onEdit"
        >
          修改订单
        </view>
        <view class="btn btn_cancel" @tap="onShowApply(true)"> 申请售后 </view>
      </view>
    </view>
    <PopupCSPhone
      v-model:show="$data.csphoneShow"
      :text="$data.text"
      title="官方客服电话"
    />
    <PopupLogin />
  </view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, nextTick, computed, onUnmounted } from "vue";
import { onLoad, onShow, onHide, onReady, onUnload } from "@dcloudio/uni-app";
import {
  getOrderDetail,
  matchingOrderDetail,
} from "../../../../api/Interface/order";
import errorCode from "../../../../utils/http/errorCode";
import BasicConfig from "../../../../utils/config";
import {
  afterSalesApplyStatus,
  hotelOrderAfterSaleStatus,
  orderSecondStatus,
  orderSourceType,
  orderStatus,
  orderStatusConfig,
} from "../../../../enums/order";
import { jumpPage } from "../../../../utils/route/route";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import { useImgSrc } from "../../../../hooks/useImg";
import { usePayment } from "../../../../hooks/usePay";
import PopupCSPhone from "../../../../components/PopupCSPhone.vue";
import { goodsType, reservaSwitch } from "../../../../enums/goods";
const Instance = getCurrentInstance();
const $vm = Instance?.appContext.config.globalProperties;
const $data = reactive({
  localNo: "",
  orderServiceId: "",
  info: null,
  timer: null,
  urgentShow: false,
  canUrgent: false, // 是否显示加急按钮
  csphoneShow: false,
  text: "",
});

/**
 * 计算属性用于确定是否显示申请按钮
 */
const showApply = computed(() => {
  return (
    $data.info &&
    $data.info.firstAfterSaleStatus == hotelOrderAfterSaleStatus.normal &&
    $data.info.secondStatus == orderSecondStatus.cancel &&
    $data.info.isHasRefund == afterSalesApplyStatus.not
  );
});
/**
 * 二次上门订单
 */
const isSecondOrder = computed(() => {
  return $data.info && $data.info.secondStatus != orderSecondStatus.cancel;
});
const init = () => {
  getOrderDetail({
    localNo: $data.localNo,
    orderServiceId: $data.orderServiceId,
  }).then((res) => {
    if (res.code === errorCode.success) {
      $data.info = res.data;
      if ($data.info) {
        setTitle();
        $data.info._picurl = useImgSrc($data.info.picurl);
        const { firstStartServicedAt, createdAt } = res.data;
        $data.info._firstStartServicedAt = dayjs(firstStartServicedAt)
          .locale("zh-cn")
          .format("YYYY-MM-DD dddd HH:mm");
        $data.info._createdAt = dayjs(createdAt)
          .locale("zh-cn")
          .format("YYYY-MM-DD dddd HH:mm");
        $data.info._statusConfig =
          orderStatusConfig[$data.info.firstStatus] ?? {};
      }
      setTimeout(() => {
        handle();
      }, 3000);
    }
  });
};
/** 修改预约 */
const onEdit = () => {
  if ($data.info.firstStatus == orderStatus.finding) {
    jumpPage({
      to: "/package-service/pages/order/updateConfirm",
      query: {
        localNo: $data.localNo,
        orderServiceId: $data.orderServiceId,
      },
    });
  }
};
const handle = () => {
  clearHandle();
  const config = { custom: { auth: true, loading: false } };
  $data.timer = setInterval(() => {
    matchingOrderDetail(
      { localNo: $data.localNo, orderServiceId: $data.orderServiceId },
      config
    ).then((res) => {
      $data.info._statusConfig = orderStatusConfig[res.data.firstStatus] ?? {};
      $data.canUrgent = res.data.isCanUrgent == 1; // 1.显示加急按钮 0.不显示
      if (
        res.code === errorCode.success &&
        res.data.firstStatus == orderStatus.awaitService
      ) {
        clearHandle();
        jumpPage({
          to: "/package-service/pages/order/details/awaitService",
          mode: "redirectTo",
          query: {
            localNo: $data.localNo,
            orderServiceId: $data.orderServiceId,
          },
        });
      }
    });
  }, 3000);
};
const clearHandle = () => {
  clearInterval($data.timer);
  $data.timer = null;
};
const setTitle = () => {
  uni.setNavigationBarTitle({
    title: orderStatusConfig[$data.info.firstStatus].label,
  });
};
const onUrgentConfirm = (e) => {
  console.log("onUrgentConfirm", e);
  if (e) {
    uni.showModal({
      content: "确认提交加急订单?",
      confirmColor: BasicConfig.MainColor,
      success: (success) => {
        if (success.confirm) {
          usePayment({
            localNo: $data.localNo,
            type: orderSourceType.urgent,
            urgentId: e.tip,
          }).then(async (res) => {
            BasicConfig.toast(res.msg);
            if (res.code === errorCode.success) {
              $data.canUrgent = false;
              setTimeout(() => {
                init();
              }, 1000);
            } else {
              // BasicConfig.toast("支付失败,请联系管理员!");
            }
          });
        }
      },
    });
  }
};
/** 是否下架 domesticServiceStatus 0.已下架 1.已上架 */
const isDown = computed(() => {
  const { domesticServiceStatus } = $data.info;
  return domesticServiceStatus == 0;
});
const onShowApply = (showText) => {
  // const { dyGoodsType, refundSwitch } = $data.info ?? {};
  // // 团购品
  // if (dyGoodsType == goodsType.group) {
  if (showText) {
    $data.text =
      "欢迎致电青芒果到家客服中心，电话拨通后请按照语音提示进行操作，提供订单号或手机号并描述具体问题，客服人员将竭诚为您服务。";
  } else $data.text = "";
  $data.csphoneShow = true;
  // }
  // // 预约品
  // else {
  //   if (refundSwitch == reservaSwitch.on) {
  //     // 跳转申请退款页
  //   } else $data.csphoneShow = true;
  // }
};
const onCall = () => {
  $data.csphoneShow = true;
};
const onApply = () => {
  // clearHandle();
  jumpPage({
    to: "/package-service/pages/order/afterSales/apply",
    query: {
      localNo: $data.localNo,
      orderServiceId: $data.orderServiceId,
    },
  });
};
const onLookApply = () => {
  clearHandle();
  jumpPage({
    to: "/package-service/pages/order/afterSales/apply",
    query: {
      localNo: $data.localNo,
      orderServiceId: $data.orderServiceId,
    },
  });
};
onLoad((options) => {
  $data.localNo = options.localNo;
  $data.orderServiceId = options.orderServiceId;
});
onShow(() => {
  // nextTick(() => {
  //   init();
  // });
  setTimeout(() => {
    init();
  }, 1000);
});
onUnload(() => {
  console.log("finding onUnload");
  clearHandle();
});
onUnmounted(() => {
	console.log("finding onUnmounted");
  clearHandle();
});
onReady(() => {});
</script>

<style lang="scss" scoped>
@import "../../../static/style/order/detail/common.scss";
.page {
  background: #ffffff;
}
.find_img {
  display: flex;
  justify-content: center;
  margin-top: 60rpx;
  image {
    width: 30vw;
    height: 30vw;
    border-radius: 15rpx;
  }
}
.urgent {
  background: $main-color;
  border-radius: 100rpx;
  padding: 10rpx 20rpx;
  text-align: center;
  color: #ffffff;
  font-size: 32rpx;
}
</style>
